<template>
  <div>
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="mini" @change="changeDate">
        <el-option v-for="(item,index) in yearList" :key="index" :value="item" :label="item + '年'" />
      </el-select>
      <el-select v-model="currentMonth" size="mini" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :value="item" :label="item + '月'" />
      </el-select>
    </el-row>
    <!-- v-model="currentDate":可以将日期设为每月的1号 -->
    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="scope">
        {{ scope.data.day | getDay }}
        <span v-if="isRest(scope.date)" class="rest">休 </span>
      </template>
    </el-calendar>

  </div>
</template>

<script>
export default {
  filters: {
    // val:旧的值：
    getDay(val) {
      const day = val.split('-')[2]
      // return day.startsWith(0) ? day.subStr(1) : day   substr!!要小写
      return day.startsWith(0) ? day.substr(1) : day
    }
  },
  props: {
    // 定义一个时间：希望从外部传进来，没有的话就用默认值：
    startDate: {
      type: Date, // 类型是时间
      default: () => new Date() // new Date() 是一个时间的值！！！

    }
  },
  data() {
    return {
      currentYear: null,
      currentMonth: null,
      currentDate: null,
      yearList: []
    }
  },
  created() {
    this.currentYear = this.startDate.getFullYear()
    this.currentMonth = this.startDate.getMonth() + 1
    // 获取前后五年的年份数组
    this.yearList = Array.from(Array(11), (val, index) => {
      // 这是一个闭包么？？
      const now = new Date()
      return index + now.getFullYear() - 5
    })
  },
  methods: {
    isRest(date) {
      // 如果 day.getday为6 或者0 就是休息！
      return date.getDay() === 6 || date.getDay() === 0
    },
    changeDate() {
      // 只要一变化，就触发函数：
      console.log('当前年份', this.currentYear)
      console.log('当前月份', this.currentMonth)
      const year = this.currentYear
      const month = this.currentMonth
      // ***模板字符串里面的空格是会解析的！！不允许留不必要的空格！！！
      const dateStr = `${year}-${month}-1` // 这里的- 不是减法的意思，而是时间格式里的杠杠---的意思，如果格式对了，就可用于转换时间！
      console.log(dateStr)
      this.currentDate = new Date(dateStr)
    }
  }
}
</script>

<style>

</style>
